<template>
  <view class="uni-common-mt" style="margin-top: 0;">
    <map class="map" id="map1" ref="map1" :enable-zoom="true"
      :scale="scale" :longitude="longitude" :latitude="latitude" :controls="controls"
      @controltap="oncontroltap" @regionchange="onregionchange"/>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: 28.1893,
      longitude: 112.9475,
      scale: 13,
      controls: [{
        id: 1,
        position: {
          left: 10,
          top: 40,
          width: 30,
          height: 30
        },
        iconPath: '/static/zoomin.png',
        clickable: true
      },{
        id: 2,
        position: {
          left: 10,
          top: 90,
          width: 30,
          height: 30
        },
        iconPath: '/static/zoomout.png',
        clickable: true
      }],
    }
  },
  onLoad() {},
  onReady() {
    this.map = uni.createMapContext("map1", this);
  },
  methods: {
    oncontroltap(e) {
      console.log("oncontroltap",e);
      const id = e.detail.controlId
      if(id==1) this.scale++;
      if(id==2) this.scale--;
    },
    onregionchange(e) {
      console.log("onregionchange",JSON.stringify(e));
    },
  }
}
</script>

<style>
</style>